/*
 * @Author: your name
 * @Date: 2022-03-29 09:52:02
 * @LastEditTime: 2022-04-11 23:00:05
 * @LastEditors: LGX
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \erp-management-system\src\components\topHeader\TopHeader.jsx
 */
import { Avatar } from 'antd';
// import { withRouter } from 'react-router-dom';
import { UserOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Menu, Dropdown } from 'antd';
import { BulbOutlined, LockOutlined, PoweroffOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,

} from '@ant-design/icons';
import { Layout } from 'antd';
const { Header } = Layout;
const Topheader = (props) => {
    const userInfo = JSON.parse(localStorage.getItem('user'))
    console.log(userInfo);
    const navigate = useNavigate();
    const [collapsed, setCollapsed] = useState(false)
    const tempKey1 = 1
    const tempKey2 = 2

    const changeCollapsed = () => {
        setCollapsed(!collapsed)
    }
    const loginOut = () => {
        localStorage.removeItem('user')
        // <Navigate to="/login" />
        navigate(`/`, { replace: true })
    }
    const menu = (
        <Menu>
            <Menu.Item key={tempKey1}>
                {userInfo.name}
            </Menu.Item>

            <Menu.Item danger key={tempKey2} onClick={loginOut}>退出</Menu.Item>
        </Menu>
    );
    return (
        <Header className="site-layout-background" style={{ padding: '0 20px' }}>
            {collapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />}
            <div style={{ float: 'right' }}>

                <Dropdown overlay={menu}>
                    <span><Avatar style={{ backgroundColor: '#87d068', marginLeft: '15px', marginRight: '10px' }} icon={<UserOutlined />} /></span>
                </Dropdown>
                <span style={{ color: 'red', margin: '10px,5px' }}>二狗</span>
                <span style={{ marginLeft: '10px', cursor: 'pointer' }}><BulbOutlined /></span>
                <span style={{ marginLeft: '10px', cursor: 'pointer' }}><LockOutlined /></span>
                <span style={{ marginLeft: '10px', cursor: 'pointer' }}><PoweroffOutlined /></span>
            </div>

        </Header>
    );
}

export default Topheader;
